<template>
  <div class="container">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="活动名称">
        <template slot-scope="scope">
          <div class="avater-name">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.coverImgUrl"
            ></el-image>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.bargainPrice | price
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="返现金额" width="120" prop="royalty">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.royalty | price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="特价结束时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.limitedTime | timeFilter
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" width="120">
        <template slot-scope="scope">
          <span
            :class="scope.row.status | isActive"
            style="margin-left: 10px"
            >{{ scope.row.status | status }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="参与用户" width="120" prop="partNum">
      </el-table-column>
      <el-table-column label="购买用户" width="120" prop="tradeCount">
      </el-table-column>
      <el-table-column label="指导老师" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id | teacher }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleRank(scope.$index, scope.row)"
          >
            分销排行
          </el-button>
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleIncome(scope.$index, scope.row)"
          >
            收益报表
          </el-button>
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleGetDiscount(scope.$index, scope.row)"
          >
            计算客户无忧订单折扣值
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class=" pagination"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-dialog title="商品信息" :visible.sync="dialogFormVisible" center>
      <el-form :model="form">
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"> </el-input>
        </el-form-item>
        <el-form-item label="佣金" :label-width="formLabelWidth">
          <el-input v-model="form.returnPrice" autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item label="线上已返佣单数" :label-width="formLabelWidth">-->
        <!--          <el-input-->
        <!--            v-model.number="form.onlineReturnNums"-->
        <!--            autocomplete="off"-->
        <!--          ></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="线上未返佣单数" :label-width="formLabelWidth">-->
        <!--          <el-input-->
        <!--            v-model.number="form.onlineNotReturnNums"-->
        <!--            autocomplete="off"-->
        <!--          ></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="线下成交单数" :label-width="formLabelWidth">-->
        <!--          <el-input-->
        <!--            v-model.number="form.offlineNums"-->
        <!--            autocomplete="off"-->
        <!--          ></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="折扣率" :label-width="formLabelWidth">
          <span class="discount">线上已返佣：{{ discountResWithReturn }}%</span>
          <span class="discount"
            >线上未返佣：{{ discountNotResWithReturn }}%</span
          >
          <span class="discount">线下：{{ discountOffline }}%</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="onSureForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getActiveList } from "../api/activeList";
import { removeSessionKey } from "../utils/cookie";
import { getTeacherName } from "../utils/teacher";
import {
  getOnlineWithReturnDiscount,
  getOnlineNotWithReturnDiscount,
  getOfflineDiscount
} from "../utils/discount";
export default {
  name: "ActiveList",
  data() {
    return {
      tableData: [],
      pageSize: 0,
      total: 0,
      dialogFormVisible: false,
      dialogTableVisible: false,
      form: {
        price: 0,
        returnPrice: 0,
        onlineReturnNums: 0,
        onlineNotReturnNums: 0,
        offlineNums: 0
      },
      discountResWithReturn: 0,
      discountNotResWithReturn: 0,
      discountOffline: 0,
      formLabelWidth: "120px"
    };
  },
  filters: {
    status: function(status) {
      return status === 0 ? "已关闭" : "进行中";
    },
    price: price => {
      price = price / 100;
      return price + "元";
    },
    teacher: id => {
      const name = getTeacherName(id);
      return name;
    },
    isActive: status => {
      return status === 0 ? "default" : "active";
    }
  },
  methods: {
    getActiveList(pageNum) {
      getActiveList(pageNum).then(res => {
        const data = JSON.parse(res.data);
        if (data.respMsg) {
          this.total = data.respMsg.pagInfo.total;
          console.log(data.respMsg.list);
          this.tableData = data.respMsg.list;
        } else {
          removeSessionKey();
          setTimeout(() => {
            this.$router.push("/login");
          }, 1000);
        }
      });
    },
    handleCurrentChange(val) {
      this.getActiveList(val);
    },
    handleRank(index, row) {
      console.log(row.id);
      this.$router.push(`ranklist/${row.id}`);
    },
    handleIncome(index, row) {
      this.$router.push(`income/${row.id}`);
    },
    handleGetDiscount(index, row) {
      console.log(row);
      this.form = {
        price: row.bargainPrice / 100,
        returnPrice: row.royalty / 100,
        onlineReturnNums: row.tradeCount,
        onlineNotReturnNums: 0,
        offlineNums: 0
      };
      this.dialogFormVisible = true;
    },
    onSureForm() {
      // this.dialogFormVisible = false
      const onlineWithReturn_l = getOnlineWithReturnDiscount(this.form);
      const onlineNotWithReturn_l = getOnlineNotWithReturnDiscount(this.form);
      const offline_l = getOfflineDiscount(this.form);
      if (
        isNaN(onlineWithReturn_l) &&
        isNaN(onlineNotWithReturn_l) &&
        isNaN(offline_l)
      ) {
        this.discountRes = "好好填才算得出来！！";
      } else {
        this.discountResWithReturn = onlineWithReturn_l;
        this.discountNotResWithReturn = onlineNotWithReturn_l;
        this.discountOffline = offline_l;
      }
    },
    closeDialog() {
      this.discountRes = 0;
      this.dialogFormVisible = false;
    }
  },

  created() {
    this.getActiveList();
  }
};
</script>
<style scoped>
.pagination {
  float: right;
  margin-top: 30px;
  margin-right: 200px;
}
.container {
  padding-top: 30px;
}
.active {
  color: #409eff;
  font-size: 1.2em;
  font-weight: bolder;
}
.dialog_count {
  width: 20% !important;
}
.discount {
  margin-right: 50px;
}
</style>
